<template>
    <div class="common-layout">
        <el-container class="container">
            <el-aside width="20%">
            <div>
                <img src="tupian.png" />
                </div> 
                <el-menu :unique-opened="true" :router="true">
                <el-menu-item index="ov">
                    <template #title>
                        <el-icon><odometer/></el-icon>
                        <span>仪表盘</span>
                    </template>
                </el-menu-item>

                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><icon-menu /></el-icon>
                        <span>常用设置</span>
                    </template>
                    <el-menu-item index="tm">教师管理</el-menu-item>
                    <el-menu-item index="sc">学生管理</el-menu-item>
                    <el-menu-item index="an">公告管理</el-menu-item>
                    <el-menu-item index="se">系统配置</el-menu-item>
                    <el-menu-item index="js">判题服务器</el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="3">
                    <template #title>
                        <el-icon><Aim /></el-icon>
                        <span>问题</span>
                    </template>
                    <el-menu-item index="pv">问题列表</el-menu-item>
                     <el-menu-item index="ad">增加题目</el-menu-item>
                      <el-menu-item index="ie">导入导出题目</el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="4">
                    <template #title>
                        <el-icon><trophy /></el-icon>
                        <span>比赛&练习</span>
                    </template>
                    <el-menu-item index="ar">比赛列表</el-menu-item>
                    <el-menu-item index="cl">创建比赛</el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="5">
                    <template #title>
                        <el-icon><collection /></el-icon>
                        <span>课程</span>
                    </template>
                    <el-menu-item index="cc">课程列表</el-menu-item>
                     <el-menu-item index="co">创建课程</el-menu-item>
                </el-sub-menu>
                </el-menu>
            </el-aside>
        <el-container>
        <el-header>
            <el-dropdown size="large">
                <span class="el-dropdown-link">
                    username
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>logout</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-icon><share /></el-icon>
            <el-icon><search /></el-icon>
        </el-header>
        <el-main>
            <router-view/>
        </el-main>
        <el-footer>Build Version: 20210929bd</el-footer>
        </el-container>
        </el-container>
    </div>
</template>



<script>

import { Odometer, Menu as IconMenu, Aim, Trophy, Collection, Search, Share,ArrowDown } from '@element-plus/icons-vue';

export default {
    name :'index',
    components: {
     
        Odometer, IconMenu, Aim, Trophy, Collection, Search, Share, ArrowDown
    },
    methods: {

    }
}
</script>

<style scoped>
  .commom-layout, .container {
      position: absolute;
      width: 100%;
      height: 100%;

  }
  .el-aside > div {
      width: 100%;
      height: 20%;
      vertical-align: middle;
      text-align: center;
  }
  .el-aside > div >img {
      width: 50%;
      height: 80%;
  }
  .el-header {
      background-color: #F9FAFC;
  }
  .el-header > i {
      margin-top: 15px;
      margin-right: 15px;
  }
  .el-header > .el-dropdown {
      margin-top: 15px;
  }
  .el-header > .el-dropdown, .el-header > i {
      float: right;
  }
  .el-dropdown-link {
      font-size: 23px;
      font-weight: bolder;
      cursor: pointer;
      display: flex;
      align-items: center;
  }
  .el-main, .el-footer {
      background-color: #EDECEC;
  }

</style>